<template>
	<view class="content">
		<view>
			<view><search-input></search-input></view>
			<view class="text-area">
			<text class="title">主页</text>
			</view>
			<!-- 轮播图开始 -->
			<view class="index_swipe">
				<swiper
				:indicator-dots="indicatorDots"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
				:circular="circular"
				>
				<swiper-item v-for="item in swiperList">
					<navigator url="item.navigator_url">
						<image mode="widthFix" src="item.image_src"></image>
					</navigator>
				</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图结束 -->
		</view>
	</view>
</template>

<script>
	import searchInput from '@/components/search.vue';
	export default {
		components:{
			'search-input': searchInput
		},
		data() {
			return {
				"indicatorDots":true,//是否显示面板指示点
				"autoplay":true,//自动滚动
				"interval":500,//自动切换时间间隔
				"duration":500,//滑动动画时长
				"circular":true,//是否采用衔接滑动
				swiperList:[]
			};
		},
		onLoad() {
			// "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
			// uni.request({
			// 	url:"https://api-hmugo-web.itheima.net/api/public.v1/home/swiperdata",
			// 	success:(res) => {
			// 		this.swiperList = res.data.message
			// 	}
			// })
			this.getSwiperList();

		},
		methods: {
			getSwiperList(){
				this.$myRequest({
					url:'home/swiperdata'
				}).then(res => {
					this.swiperList = res.data/message
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
